import { PayDataType } from "@/api/promo";
import DomainFooter from "@/components/DomainFooter";
import { Link } from "@/i18n/routing";
import { server } from "@/utils/server";
import Image from "next/image";
import { Download, DownNumber } from "./DownNumber";
const getActivityApi = () => {
    return server
        .request<PayDataType>({
            url: "/v1/api/front/activity/pay",
            method: "post",
        })
        .then((res) => {
            return !Array.isArray(res.data) ? res.data.first_pay || [] : [];
        })
        .catch((e) => {
            return [];
        });
};
const getUserRegTypeFreeStatusApi = () => {
    return server
        .request<any>({
            url: "/v1/api/user/user_reg_type_free_status",
            method: "post",
        })
        .then((res) => {
            return res.data;
        })
        .catch((e) => {
            return {};
        });
};

const Page = async () => {
    const activities = await getActivityApi();
    const config = await getUserRegTypeFreeStatusApi();
    /// 如果数组不为空， 则有活动
    const hasEndTimeActivities = activities.length > 0;
    const current = activities.find((item) => item.end_time > 0)?.end_time;
    const endtime = current ? current * 1000 : 0;
    return (
        <>
            <div className={"flex flex-col [min-height:calc(100%-0.81rem)]"}>
                <div className={"flex-1"}>
                    <div className={"mb-[0.2778rem] mt-[0.2083rem] flex flex-col items-center"}>
                        <Image
                            src={"/recharge/success.png"}
                            alt={"success"}
                            width={80}
                            height={80}
                        />
                        <h1 className={"mt-[0.2083rem] font-bold"}>Parabéns</h1>
                        <p className={"mt-[5px] text-[0.12rem]"}>
                            Sua conta foi criada com sucesso.
                        </p>
                    </div>

                    <div
                        className={
                            "relative m-[0.0694rem] rounded-[10px] bg-gradient-to-b" +
                            " from-[#f8e4bf] to-[#f2ae38] p-[0.1389rem]"
                        }
                    >
                        <div className={"absolute -top-[0.12rem] left-1/2 -translate-x-1/2"}>
                            <Image
                                src={"/recharge/title_bg.png"}
                                alt={"Novo Usuário"}
                                width={300}
                                height={160}
                            />
                            <span
                                className={
                                    "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" +
                                    " text-[0.125rem] font-bold text-[#ff7301]"
                                }
                            >
                                Novo Usuário
                            </span>
                        </div>

                        {hasEndTimeActivities && (
                            <div
                                className={
                                    "mt-[0.2778rem] flex rounded-[0.0347rem] bg-[#fbe6c6]" +
                                    " p-[0.0694rem]" +
                                    " items-center text-[#000]"
                                }
                            >
                                <div>
                                    <Image
                                        src={"/recharge/activity-1.png"}
                                        alt={"activity-1"}
                                        width={80}
                                        height={40}
                                    />
                                </div>
                                <div className={"ml-[20px] w-[100%]"}>
                                    <div className={"flex items-center"}>
                                        <div className={"flex-1"}>
                                            {endtime ? <DownNumber endTime={endtime} /> : null}
                                        </div>
                                        <Link href={"/deposit"}>
                                            <div
                                                className={
                                                    "bg-[url(/recharge/button-1.png)] " +
                                                    " bg-[length:100%_100%] bg-no-repeat" +
                                                    " h-[0.4167rem] w-[0.8333rem] pt-[0.0347rem]"
                                                }
                                            >
                                                <span
                                                    className={
                                                        "flex items-center text-[0.125rem]" +
                                                        " font-bold" +
                                                        " justify-center text-[#fff]"
                                                    }
                                                >
                                                    Deposito
                                                </span>
                                            </div>
                                        </Link>
                                    </div>
                                    <div>
                                        No primeiro depósito acima de 5 BRL, você pode receber um bônus de 100%. Válido por 5 horas
                                    </div>
                                </div>
                            </div>
                        )}

                        {/*   2*/}
                        <div
                            className={
                                "mt-[10px] flex rounded-[0.0347rem] bg-[#fbe6c6]" +
                                " p-[0.0694rem]" +
                                " items-center justify-between text-[#000]"
                            }
                        >
                            <Image
                                src={
                                    hasEndTimeActivities
                                        ? "/recharge/activity-2.png"
                                        : "/recharge/activity-1.png"
                                }
                                alt={"activity-1"}
                                width={60}
                                height={40}
                            />
                            <div className={"ml-[20px] flex-1"}>ADICIONAR À TELA INICIAL</div>
                            <Download />
                        </div>

                        {/*  3 */}
                        {config.status && (
                            <div
                                className={
                                    "mt-[10px] flex rounded-[0.0347rem] bg-[#fbe6c6]" +
                                    " p-[0.0694rem]" +
                                    " items-center text-[#000]"
                                }
                            >
                                <div>
                                    <Image
                                        src={
                                            hasEndTimeActivities
                                                ? "/recharge/activity-3.png"
                                                : "/recharge/activity-2.png"
                                        }
                                        alt={"activity-3"}
                                        width={80}
                                        height={40}
                                    />
                                </div>
                                <div className={"ml-[20px] w-[100%]"}>
                                    <div className={"flex items-center"}>
                                        <div className={"flex-1"}>De registo prémios</div>
                                        <Link href={"/freeGames"}>
                                            <div
                                                className={
                                                    "bg-[url(/recharge/button-1.png)] " +
                                                    " bg-[length:100%_100%] bg-no-repeat" +
                                                    " h-[0.4167rem] w-[0.8333rem] pt-[0.0347rem]"
                                                }
                                            >
                                                <span
                                                    className={
                                                        "flex items-center text-[0.125rem]" +
                                                        " font-bold" +
                                                        " justify-center text-[#fff]"
                                                    }
                                                >
                                                    Jogo
                                                </span>
                                            </div>
                                        </Link>
                                    </div>
                                    <div>
                                        <span className={"font-bold text-[red]"}>{config?.data?.amount ?? 0}</span> grátis para começar a jogar
                                        imediatamente
                                    </div>
                                </div>
                            </div>
                        )}
                    </div>
                </div>

                <div className={"flex w-[100%] justify-between p-[10px]"}>
                    <Link href={"/"} className={"text-primary-color"}>
                        <span className={"iconfont icon-xiangzuo1"}></span>
                        Inicio
                    </Link>
                    <Link href={"/deposit"} className={"text-primary-color"}>
                        Depósito
                        <span className={"iconfont icon-xiangyou1"}></span>
                    </Link>
                </div>
            </div>

            <div className={"h-[0.81rem]"}>
                <DomainFooter />
            </div>
        </>
    );
};
export default Page;